HTMLEdManager.ImagePlugin = {};

HTMLEdManager.ImagePlugin.templates = [];
HTMLEdManager.ImagePlugin.templates [ 'lay-out' ] = '<div id="htmled-image-tabs"></div><div id="htmled-image-content"></div>';

HTMLEdManager.ImagePlugin._init_tabs = function ()
{
        var tabs = new OS3Tabs.instance ( 'add-image-tabs' );
        tabs.add ( 'Browse files', 'htmled-image-browse' );
        tabs.add ( 'Alignment', 'htmled-image-form');
        tabs.render ( 'htmled-image-tabs' );
        HTMLEdManager.ImagePlugin._tabs = tabs;
};

HTMLEdManager.ImagePlugin.add_image = function ( doc, editor )
{
	HTMLEdManager.ImagePlugin.add_image._cur_doc = doc;
	liwe.lightbox.fade = false;
	liwe.lightbox.easy ( "htmled_image", "Inserimento immagine", 850, 660 );
	if ( typeof ( download_manager ) == 'undefined' ) 
	{
		$( "htmled_image", "Manca il modulo download manager" );
		return;
	}

	var templates = HTMLEdManager.ImagePlugin.templates;
	HTMLEdManager.ImagePlugin._set_override ( doc, editor );
	
	$( "htmled_image" , templates [ 'lay-out' ] );

	HTMLEdManager.ImagePlugin._init_tabs ();
	
	HTMLEdManager.ImagePlugin._DM_render ();
	HTMLEdManager.ImagePlugin._align_form ();
	//download_manager.render ( "htmled_image" );
};

HTMLEdManager.ImagePlugin._set_override = function ( doc, editor )
{
	// reset download manager to default options
	download_manager.set_results_div ( 'DM-results' );
	download_manager.reset_templates ( 'icons' );
	// override download_file function 
	download_manager.download_file = function ( path_name , file_name )
	{
		var sel = HTMLEdManager.getSelection ( doc, editor );
		var img = doc.createElement ( 'img' );

		img.setAttribute( 'src', path_name );
		img.setAttribute( 'title', file_name );
		HTMLEdManager.ImagePlugin._extra_attr ( img );
		
		sel.insertNode ( img );	
		liwe.lightbox.close ();
	};
};

HTMLEdManager.ImagePlugin._extra_attr = function ( elem )
{
	var f = liwe.form.get ( 'htmled-align-form' );
	var vals = f.get_values ();
	console.debug ( "VALS: %o" , vals );
	var pad = vals [ 'padding-top' ] + ' ' + vals [ 'padding-right' ] + ' ' + 
		  vals [ 'padding-bottom' ] + ' ' + vals [ 'padding-left' ];

	var mrg = vals [ 'margin-top' ] + ' ' + vals [ 'margin-right' ] + ' ' + 
		  vals [ 'margin-bottom' ] + ' ' + vals [ 'margin-left' ];

	elem.style.padding = pad;
	elem.style.margin = mrg;
	elem.style.verticalAlign = vals.get ( 'v-align' , 'middle' );

	if ( vals.get ( 'float', '' ) != '' ) 
	{
		console.debug ( "float %s", vals[ 'float' ] );
		elem.style.cssFloat = vals[ 'float' ];
		elem.style.styleFloat = vals[ 'float' ];
	}
};

HTMLEdManager.ImagePlugin._DM_render = function ()
{
	download_manager.render ( "htmled-image-browse" );
};

HTMLEdManager.ImagePlugin._align_form = function ()
{
	var opt_float = [
			{ label: 'none', value :'' },	
			{ label: 'right', value :'right;' },	
			{ label: 'left', value :'left;' }	
			];
	var opt_valign = [
			{ label: 'middle', value :'middle' },	
			{ label: 'top', value :'top' },	
			{ label: 'bottom', value :'bottom' }	
			];
	var f = new liwe.form.instance ( 'htmled-align-form' );
	f.text ( { name: 'padding-top' , label : 'padding top', value : '3px' } );
	f.text ( { name: 'padding-right' , label : 'padding right', value : '3px' } );
	f.text ( { name: 'padding-bottom' , label : 'padding bottom', value : '3px' } );
	f.text ( { name: 'padding-left' , label : 'padding left', value : '3px' } );
	f.sep ();
	f.text ( { name: 'margin-top' , label : 'margin top', value : '' } );
	f.text ( { name: 'margin-right' , label : 'margin right', value : '' } );
	f.text ( { name: 'margin-bottom' , label : 'margin bottom', value : '' } );
	f.text ( { name: 'margin-left' , label : 'margin left', value : '' } );
	f.sep ();
	f.select ( { name: 'float', label : 'float', options : opt_float } );
	f.sep ();
	f.select ( { name: 'v-align', label : 'v-align', options : opt_valign } );
	
	f.set ( 'htmled-image-form' );
	
};

HTMLEdManager.register_plugin ( "image", 
{
	actions : [
			[ "add_image", HTMLEdManager.ImagePlugin.add_image, "add_image" ]
	]
} );
